<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>最新消息</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
			
		<!--标准mui.css-->
		<link rel="stylesheet" href="../../css/mui.min.css">
		<!--App自定义的css-->
		<style>
			.title {
				margin: 20px 15px 10px;
				color: #ffffff;
				font-size: 15px;
			}
			.mui-bar-nav{
				background-color: #498af7;
			}
			
			.mui-title {
			    font-size: 17px;
			    font-weight: 500;
			    line-height: 44px;
			    position: absolute;
			    display: block;
			    width: 100%;
			    margin: 0 -10px;
			    padding: 0;
			    text-align: center;
			    white-space: nowrap;
			    color: #ffffff;
			}
			
			a {
			    text-decoration: none;
			    color: #f7f7f7;
			}



			.mui-bar~.mui-content .mui-fullscreen {
				top: 44px;
				height: auto;
			}
			.mui-pull-top-tips {
				position: absolute;
				top: -20px;
				left: 50%;
				margin-left: -25px;
				width: 40px;
				height: 40px;
				border-radius: 100%;
				z-index: 1;
			}
			.mui-bar~.mui-pull-top-tips {
				top: 24px;
			}
			.mui-pull-top-wrapper {
				width: 42px;
				height: 42px;
				display: block;
				text-align: center;
				background-color: #efeff4;
				border: 1px solid #ddd;
				border-radius: 25px;
				background-clip: padding-box;
				box-shadow: 0 4px 10px #bbb;
				overflow: hidden;
			}
			.mui-pull-top-tips.mui-transitioning {
				-webkit-transition-duration: 200ms;
				transition-duration: 200ms;
			}
			.mui-pull-top-tips .mui-pull-loading {
				/*-webkit-backface-visibility: hidden;
				-webkit-transition-duration: 400ms;
				transition-duration: 400ms;*/
				
				margin: 0;
			}
			.mui-pull-top-wrapper .mui-icon,
			.mui-pull-top-wrapper .mui-spinner {
				margin-top: 7px;
			}
			.mui-pull-top-wrapper .mui-icon.mui-reverse {
				/*-webkit-transform: rotate(180deg) translateZ(0);*/
			}
			.mui-pull-bottom-tips {
				text-align: center;
				background-color: #efeff4;
				font-size: 15px;
				line-height: 40px;
				color: #777;
			}
			.mui-pull-top-canvas {
				overflow: hidden;
				background-color: #fafafa;
				border-radius: 40px;
				box-shadow: 0 4px 10px #bbb;
				width: 40px;
				height: 40px;
				margin: 0 auto;
			}
			.mui-pull-top-canvas canvas {
				width: 40px;
			}
			.mui-slider-indicator.mui-segmented-control {
				background-color: #efeff4;
			}
		</style>
	</head>

	<body>
		
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">最新消息</h1>
		</header>
		<div class="mui-content" id="msg-content">
			<ul class="mui-table-view">				
				<li class="mui-table-view-cell"  v-on:click="msgdetail(item.url)"  v-for="item in msg_list">
		            <div class="mui-table">
		                <div class="mui-table-cell mui-col-xs-10">
		                    {{item.title}}
		                    <p class="mui-h6 mui-ellipsis">{{item.content}}</p>
		                </div>
		                <div class="mui-table-cell mui-col-xs-2 mui-text-right" style="magin-right:10px">
		                    <span class="mui-h5">{{item.add_date}}</span>
		                </div>
		            </div>
		        </li>
			</ul>			
		</div>
	</body>
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/vue.js"></script>	
	<script src="../../js/mui.pullToRefresh.js"></script>
	<script src="../../js/mui.pullToRefresh.material.js"></script>

	<script>
		mui.init();
		(function($) {
			$.ready(function() {
				fistLoadMsg();					
				var upTime = 0; // 上拉次数记录
        		var data_length = 0; // 初始加载数据长度
        		
				//循环初始化所有下拉刷新，上拉加载。
				$("#msg-content").pullToRefresh({
                down: { // 下拉刷新，重新加载数据
                    callback: function() {
                        var self = this;
                        mui.ajax('https://bird.ioliu.cn/v1?url=http://app.xiaoweicanting.com/hospital.php?m=App&c=index&a=getRecommendRepairNoteList&hospitalid=10&departmentid=11&uid=3&token=dfaf', {
                            dataType: 'json', //服务器返回json格式数据
                            type: 'get', //HTTP请求类型
                            success: function(data) {
                                //获得服务器响应
                                mui.toast('数据成功加载', {
                                    duration: 'short',
                                    type: 'div'
                                });
                                //todo
                                if(data.state == "success"){
							    	app.msg_list = data.data;
							    }

                                self.endPullDownToRefresh();

                            },
                            error: function(err) {
                                console.log(err);
                                mui.toast('网络加载错误', {
                                    duration: 'short',
                                    type: 'div'
                                });
                                self.endPullDownToRefresh();
                            }
                        });
                    }
                },
                up: {
                    // 上拉新增5条数据
                    callback: function() {
                        var self = this;
                        setTimeout(function() {
                            var skipLi = upTime * 5 + data_length;
                            mui.ajax('https://bird.ioliu.cn/v1?url=http://app.xiaoweicanting.com/hospital.php?m=App&c=index&a=getRecommendRepairNoteList&hospitalid=10&departmentid=11&uid=3&token=dfaf&uid=3&token=dfaf&limit=5&skip=' + skipLi, {
                                dataType: 'json', //服务器返回json格式数据
                                type: 'get', //HTTP请求类型
                                success: function(data) {
                                    //获得服务器响应
                                    var order_list = data.data;
                                    if (order_list.length == 0) {
                                        console.log("没有可加载的数据了");
                                        mui.toast('没有可加载的数据了', {
                                            duration: 'short',
                                            type: 'div'
                                        });
                                        console.log("已加载次数:" + upTime);
                                    } else {
                                        //todo
                                        if(data.state == "success"){
							    			app.msg_list = app.msg_list.concat(data.data);
							    			
                                        }
                                    }
                                    self.endPullUpToRefresh();
                                },
                                error: function(err) {
                                    console.log(err);
                                    mui.toast('网络加载错误', {
                                        duration: 'short',
                                        type: 'div'
                                    });
                                    self.endPullUpToRefresh();
                                }
                            });
                        }, 1000);
                    }
                }
            });
		});
	})(mui);
		
		
	function fistLoadMsg(){
		mui.ajax('https://bird.ioliu.cn/v1?url=http://app.xiaoweicanting.com/hospital.php?m=App&c=index&a=getRecommendRepairNoteList&hospitalid=10&departmentid=11&uid=3&token=dfaf', {
            dataType: 'json', //服务器返回json格式数据
            type: 'get', //HTTP请求类型
            success: function(data) {
                //获得服务器响应
                mui.toast('数据成功加载', {
                    duration: 'short',
                    type: 'div'
                });
                //todo
                if(data.state == "success"){
			    	app.msg_list = data.data;
			    }
            },
            error: function(err) {
                console.log(err);
                mui.toast('网络加载错误', {
                    duration: 'short',
                    type: 'div'
                            });
                        }
                    });
	}
			
	var app = new Vue({
      el: '#msg-content',
      data: {
      	show1: false,
    	text1: '加载中...',
        msg_list: [],
      	index: 0
      },
      methods: {
	    msgdetail (url) {
			mui.openWindow({
				url: "hpPicUrl.html",
			    id: "hpPicUrl.html",
			    styles:{
			    	top: 0,
			    	bottom: 0
			    },
			    extras:{
			    	url: url
			    }
			});
	    }
  	  }
    })
		
	</script>
</html>